<template>
  <div>
    <div class="model-container">
      <div class="model-container-title">基本案例</div>
      <y-input type="text" placeholder="请输入内容" v-model="msg1"></y-input>
    </div>
    <div class="model-container">
      <div class="model-container-title">水平尺寸拓展案例</div>
      <y-input type="text" placeholder="请输入内容" v-model="msg2" autoSize="width"></y-input>
    </div>
    <div class="model-container">
      <div class="model-container-title">垂直尺寸拓展案例</div>
      <y-input type="text" placeholder="请输入内容" v-model="msg3" autoSize="height"></y-input>
    </div>
  </div>
</template>

<script lang='ts'>
import { reactive,toRefs } from "vue";
export default {
  name: "InputIntro",
  setup() {
    const state = reactive({
      msg1: "",
      msg2: '',
      msg3: ''
    });
    return {
      ...toRefs(state)
    }
  },
};
</script>

<style lang='scss' scoped>
@import "../model.scss";
</style>